:root
{
    --color-primary:rgba(0, 0, 0, .5);;
    --color-secondary: rgba(255,7,85,.7 );
}
/* Reset Browser */
/* *, *::before, *::after
{
    box-sizing: border-box;
}
html
{
    scroll-behavior: smooth;
} */



body
{
    background-image: url(Images/03c2f1f839ac532327ba5cab9f2a7f29.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: center ;
    font-family: "Sevillana", cursive;
    font-weight: 400;
    font-style: normal;
    overflow-x:auto ;
    width: 100%;
    overscroll-behavior: none;
}

.container
{
    background-color:var(--color-secondary);
    text-shadow:2px 2px 2px black;
    min-height: 15rem;
    max-width: 75rem;
    margin: auto;
    padding: 1rem 3rem 1rem 3rem;
    position:relative;
    border-radius:1.5rem;
    color: white;
}



#pageheader
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    text-align: center;
}

#pagenav
{
    min-height: 40px;
    width: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left:calc(50% - 150px);
    bottom: 70px;
    text-shadow:2px 2px 2px black;
    font-size: 24px;
}

#logo
{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    padding:1.5rem;
    box-sizing:border-box;
    position:relative;
    top:-6px;
        left:calc(50% - 75px);
    background-image: url(Images/Logo.png);
    background-position: center center;
    border-radius:1.5rem;
}

#blockquote
{
    min-height: 5rem;
    max-width: 120rem;
    background-color:var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    font-size: 24px;
    font-weight: bold;
    color: white;
}
#blockquote .container
{
    min-height: 5rem;

}
#pagenav
{
    min-height: 4rem;
    max-width: 75rem;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    text-align: center;
    margin: auto;
    
}
#pagenav
{
    text-decoration: none;
    text-transform: uppercase;
}
#pagenav .container
{
    min-height: 5rem;
}

#topnav
{
    min-height: 5rem;
    max-width: 75rem;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    text-align: center;
    margin: auto;
    
}
#topnav
{
    text-decoration: none;
    text-transform: uppercase;
}
#topnav .container
{
    min-height: 5rem;
}

#topnav a
{
    position: relative;
    top:1.5rem;
    font-size: larger;
    font-style: bold;
}

#media
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
}

#career
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
}

#pagecontent
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
}
#keyassignments
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    max-width: 75rem;
    margin: auto;
}

#semesters
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    max-width: 75rem;

}
.semester
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    color: white;
    max-width: 75rem;
}

#pagefooter
{
    min-height: 5rem;
    max-width: 75rem;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    text-align: center;
}
#pagefooter
{
    text-decoration: none;
    text-transform: uppercase;
}
#pagefooter .container
{
    min-height: 5rem;
}
#subfooter
{
    min-height: 5rem;
    max-width: 75rem;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    text-align: center;
}
#subfooter .container
{
    min-height: 5rem;
}
iframe
{
    
    
    background-color: var(--color-secondary);
    color:var(--color-secondary);
    text-shadow:2px 2px 2px black;
    padding:1rem;
    opacity:0.8;
    display:block;
    margin: 0 auto;
    aspect-ratio: 16 /9 ;
    width:90%;
    border-radius:1.5rem ;
}

blockquote
{
font-size: 24px;
color:white;
font-weight: bold;
text-shadow:2px 2px 2px black;
position: relative;
margin: auto;
text-align: center;
top:5rem;

}

#pageheader p
{
    font-size: 24px;
color:white;
font-weight: bold;
text-shadow:2px 2px 2px black;
position: relative;
margin: auto;
text-align: center;
top:5rem;
}

#semesters
{
    background-color: var(--color-primary);
}

#semester1
{
    margin: auto;
    margin-bottom:1.5rem ;
}
#semester2
{
    margin: auto;
    margin-bottom:1rem ;

}
a{
    color:white;
    text-shadow:2px 2px 2px black;
    padding:5px;
}

#cs
{
position: relative;
bottom: 0%;
align-content: center center;
}
p
{
font-size: 20px;
color:white;
font-weight: bold;
text-shadow:2px 2px 2px black;
margin: auto;
bottom: -50px;
text-align: center;
}

#top
{
width: 25px;
height: 25px;
background-color:var(--color-secondary);
border: 1px solid var(--color-primary);
padding: 1rem;
position:fixed;
text-align: center;
right: 20px;
bottom: 20px;
border-radius: 50%;

}
button
{
    background-image: url(Images/Play&Pause.png);
    width: 50px;
    height: 50px;
    border-radius: 100%;
    box-sizing:border-box;
    position:absolute;
    border-radius:1.5rem;
    background-color:var(--color-secondary);
    border: 1px solid var(--color-primary);
    right: 20px;
    bottom: 100px;
    position:fixed;
    background-color: var(--color-secondary);
    background-size: cover;
    background-position: center ;
}
li
{
list-style-type:none;     
}

button, #top, p , #cs, .semesters, #semesters, #quote, #pagefooter, #subfooter, #pagecontent, #pagenav, #career, #pageheader, #media, #blockquote
{
    max-width:1200px;
    margin: auto;
}

#finalquote
{
    min-height: 200px;
    background-color: var(--color-primary);
    padding: 1rem;
    text-shadow:2px 2px 2px black;
    border-radius:1.5rem;
    max-width: 75rem;
    margin: auto;
}
#finalquote #quote
{
    font-size: 25px;
    text-align: center;
}