@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700&display=swap');
:root{
    --accentcolor: #FF3232;
    --textcolor: #FFFFFF;
    --background: #161616;
    --cardcolor : #303030;
}

body{
    text-align: center;
    background: var(--background);
    color: var(--textcolor);
    font-family: 'Manrope', sans-serif;
}

accent{
    color: var(--accentcolor);
}

h1{
    font-size: 5rem;
    margin-bottom: 0rem;
}

h2{
    font-size: 2rem;
    margin-bottom: 0.5rem;
    margin: 0;
}

h3{
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

a{
    color: var(--accentcolor);
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

img{
    cursor: pointer;
}

footer{
    bottom: 0;
    margin-top: 5rem;
    width: 100%;
}

.topnav{
    overflow: hidden;
    font-size: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

.topnav-right{
    float: right;
}

.topnav-left{
    float: left;
}

.btn{
    background-color: var(--accentcolor);
    color: var(--textcolor);
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
}

.card{
    background: var(--cardcolor);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
    transition: 0.2s;
    margin: 1rem;
    width: 225px;
    height: 250px;
}

.card:hover{
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5)
}

.container{
    width: 100%;
    color: var(--accentcolor);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.title{
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--accentcolor);
}

.desc{
    color: var(--textcolor);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}