@import url('https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&display=swap');

body {
    --blue-text: rgba(4, 120, 255, 1);
    --green-text: rgba(46, 177, 0, 1);
    --red-text: rgba(255, 64, 4, 0.84);
    font-family: Anonymous Pro;
    background-image: url("./pta/logo.jpg");
    background-repeat: no-repeat;
}

.container {
    padding-bottom: 20em;
}

p,
ul {
    font-size: 0.8rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1rem !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    margin: 1rem !important;
}

#talk-header p {
    font-size: 33px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    letter-spacing: 0em !important;
    text-align: left !important;
}

p+p.header {
    margin-top: 5em !important;
}

a {
    color: inherit;
}

.header {
    margin-bottom: 1em;
}

.indentation {
    margin-left: 2rem;
}

ul {
    list-style-type: none;
    padding: 0;
}

#nav-bar ul {
    display: table;
    width: 60%;
    margin: 0.5rem;
}

#nav-bar li {
    display: table-cell;
}

#general {
    margin-bottom: 5vh;
}

#footer {
    margin-top: 15vh;
}

#talk-header {
    margin-bottom: 5vh;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video {
    position: relative;
    border: solid 1px var(--red-text);
    margin: 1rem;
    padding-bottom: 56.25%; /* 16:9, for an aspect ratio of 1:1 change to this value to 100% */ 
}

.max-width {
    width: 100%;
}

.sponsor {
    width: 120px;
}

/* big */
@media only screen and (min-width: 60em) {
    body {
        background-size: 75%;
        --pink: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 147, 251, 0) 16.77%),
            linear-gradient(180deg, #FD97FF 0%, rgba(255, 255, 255, 0) 50.06%),
            linear-gradient(0deg, rgba(255, 243, 243, 0), rgba(255, 243, 243, 0));

        --blue: linear-gradient(180deg, #FFFFFF 0%, rgba(50, 255, 255, 0) 10%),
            linear-gradient(180deg, #A4DCFB 10%, rgba(255, 255, 255, 0) 20%),
            linear-gradient(180deg, #A4DCFB 10%, rgba(255, 255, 255, 0) 30%),
            linear-gradient(0deg, rgba(255, 243, 243, 0), rgba(255, 243, 243, 0));
        --green: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, #CCFFAC 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #CCFFAC 0%, rgba(255, 255, 255, 0) 0);
        --yellow: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, #F5DD88 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);
        --grey: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, rgb(200, 200, 200) 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);
    }

    .talk .body {
        margin-top: 9em;
    }

    .fixed-sm {
        position: relative;
    }
}

/* medium */
@media only screen and (min-width: 45em) and (max-width: 60em) {
    body {
        background-size: 150%;
        background-position: 0% 2.5rem;

        --pink: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #FD97FF 0%, rgba(226, 255, 219, 0) 25%);
        --blue: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #32FFFF 0%, rgba(226, 255, 219, 0) 10%),
            linear-gradient(180deg, #A4DCFB 0%, rgba(226, 255, 219, 0) 25%);
        --green: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #98FF32 0%, rgba(226, 255, 219, 0) 10%),
            linear-gradient(180deg, #CCFFAC 0%, rgba(226, 255, 219, 0) 25%);
        --yellow: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, #F5DD88 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);
        --grey: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg,rgb(200, 200, 200) 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);


    }

    #general {
        margin-top: 70vh;
    }

    .talk .body {
        margin-top: 3em;
    }

    .fixed-sm {
        position: fixed !important;
        top: 0;
        background-color: white;
        z-index: 1000;
    }

    #nav-bar ul {
        width: 100%;
        margin: 0 0.5rem;
    }
}

/* small */
@media only screen and (max-width: 45em) {
    body {
        background-size: 260%;
        background-position: 0% 2rem;
        --pink: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #FD97FF 0%, rgba(226, 255, 219, 0) 25%);
        --blue: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #32FFFF 0%, rgba(226, 255, 219, 0) 10%),
            linear-gradient(180deg, #A4DCFB 0%, rgba(226, 255, 219, 0) 25%);
        --green: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 50, 247, 0) 5%),
            linear-gradient(180deg, #98FF32 0%, rgba(226, 255, 219, 0) 10%),
            linear-gradient(180deg, #CCFFAC 0%, rgba(226, 255, 219, 0) 25%);
        --yellow: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, #F5DD88 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);
        --grey: linear-gradient(180deg, #FFFFFF 0, rgba(152, 255, 50, 0) 5rem),
            linear-gradient(180deg, rgb(200, 200, 200) 5rem, rgba(255, 255, 255, 0) 30rem),
            linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 0);
    }

    .talk .body {
        margin-top: 3em;
    }

    #general {
        margin-top: 70vh;
    }

    .fixed-sm {
        position: fixed !important;
        top: 0;
        background-color: white;
        z-index: 1000;
    }

    #nav-bar ul {
        width: 100%;
        margin: 0 0.5rem;
    }
}

/** Colors */
#talk-header .content:nth-child(1),
.talk .content:nth-child(1) {
    color: var(--blue-text);
}

#talk-header .content:nth-child(2),
.talk .content:nth-child(2) {
    color: var(--green-text);
}

#talk-header .content:nth-child(3),
.talk .content:nth-child(3) {
    color: var(--red-text);
}

.pink {
    background: var(--pink);
}

.blue {
    background: var(--blue);
}

.green {
    background: var(--green);
}

.yellow {
    background: var(--yellow);
}

.grey {
    background: var(--grey);
}