/* Import fonts here if you so desire! */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

/* Some little tweaks and the like. */
body {
    font-family: "Nunito Sans";

    background-color: #2b3452;

    padding: 0;
    margin: 0;
}

/* Header. */
header {
    text-align: center;

    color: #e9ebf5;
}

header h1 {
    padding-top: 24px;
}

header ul {    
    list-style-type: none;

    padding: 0;
    margin: 0;

    width: 100%;
    
    background-color: rgba(0, 0, 0, 0.1);
}

header ul li {
    display: inline-block;

    padding: 12px;

    transition: all 0.25s ease-in-out;
}

header ul li:hover {
    cursor: pointer;

    transform: scale(110%);
}

header a {
    color: #e9ebf5;
}

/* Styling the containers. */
.container {
    display: block;
    overflow: hidden;

    padding: 60px 120px;

    color: #e9ebf5;
}

.container h2 {
    text-align: center;

    margin-bottom: 60px;
}

div:nth-child(1 of .container) h2 {
    margin-bottom: 20px;
}

div:nth-child(1 of .container) {
    background-image: url('../imgs/pod-render.png');
    background-position: center;
    background-repeat: no-repeat;

    text-align: center;

    padding: 200px 40px;
}

div:nth-child(odd of .container) {
    background-color: rgba(0, 0, 0, 0.1);
}

.container button {
    padding: 12px 50px;

    font-size: 11pt;

    color: white;
    background-color: #4fd65a;

    border: 0;
    border-radius: 25px;

    transition: all 0.25s ease-in-out;
}

.container button:hover {
    cursor: pointer;

    transform: scale(110%);

    background-color: #7ad682;
}

/* Dragon Ball zone. */
#goku {
    display: none;

    position: absolute;
    transform: translate(120px, -10px);

    height: 150px;
}

.piccolo {
    position: fixed;

    top: 70vh;
    left: 80vw;

    width: 20vw;

    transition: opacity 1s ease-in-out;
}

.fade-out {
    opacity: 0;
}

.disclaimer {
    color: rgba(255, 255, 255, 0.4);

    font-size: 8pt;
}

/* Styling the testimonials. */
#testimony {
    display: flex;

    list-style-type: none;

    padding: 0;
    margin: 0;

    justify-content: center;
}

#testimony li {
    display: flex;

    text-align: center;

    justify-content: center;
    align-items: center;

    margin-left: 20px;

    padding: 40px;
    width: 33vw;

    background-color: #142638;
    border-radius: 10px;
}

#testimony li:nth-child(1) {
    margin-left: 0;
}