body {
    background-color: rgb(16, 16, 16);
    margin: 2.5rem;
}

h1 {
    color: #ef3a3a;
    font-size: 0.8rem;
    font-family: sans-serif;
    margin-top: 15px;
    margin-bottom: 5px;
}

h2 {
    color: #ef3a3a;
    font-size: 0.7rem;
    font-family: sans-serif;
    margin-top: 15px;
    margin-bottom: 5px;
}

p {
    color: white;
    font-size: 0.7rem;
    font-family: serif;
    margin: 0;
    text-indent: 12px;
}




.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20%;
}

.monster {
    height: 150px;
}

.logo {
    position: absolute;
    right: 2rem;
    top: 2rem;
    height: 110px;
}

.logo:hover {
    scale: 104%;
}


/*Dropdown*/

.dropbtn {
    position: relative;
    background-color: transparent;
    padding: 0;
    text-align: left;
    border: none;
    min-width: 125px;
    z-index: 0;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  width: 230px; 
  top: 120%;
  left: -25px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .monster {
    scale: 145%;
}

.dropdown:hover {
    z-index: 1;
}

/*Flex*/


@media (max-width: 550px) {

    .flex-container {
        flex-direction: column;
    }
    
    .monster {
        width: 100%;
        height: auto;
        padding-left: 0;
        padding-bottom: 0.7rem;
    }
    
    body {
        margin-top: 10rem;
    }
    
    .logo {
        position: absolute;
        right: 2rem;
        top: 2rem;
        height: 80px;
    }
    
    .logo:hover {
        scale: 100%;
    }
    
    .dropdown:hover .monster {
        scale: 100%;
    }
    
    .dropdown-content {
        display: block;
        position: relative;
        width: 100%;
        margin-left: 2rem;
        margin-right: 2rem;
        margin-bottom: 5rem;
    }
    
    h1 {
      font-size: 1.4rem;  
    }
    
    h2, p {
        font-size: 0.9rem;  
    }
    
    
    
    
}