body {
    font-family: sans-serif;
    margin: 0;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  
  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: salmon;
    color: white;
  }

.header {
    padding: 10px;
    /* background-color: salmon; */
    color: white;
    background: radial-gradient(farthest-side at top left,
    rgba(174,255,216,.75),transparent),
    
    radial-gradient(farthest-side at bottom left,
    rgba(255,200,80,.75),transparent),     

radial-gradient(farthest-corner at bottom right,
    rgba(231,111,81,.75),transparent) #003b44;
}

#head1 {
    text-align: center;
    font-family: "Rubik Vinyl", serif;
    font-weight: 400;
    font-style: normal;
} 

.wrapper {
    display: flex;
}

.left {
    /* flex: 1; */
    width: 40%;
    padding: 10px;
}

.right {
    /* flex: 2; */
    width: 60%;
    padding: 10px;
}

@media screen and (max-width: 600px) {

    .wrapper {
        display: block;
    }
    .left   {
        width: 100%;
        box-sizing: border-box;
    
    }

    .right {
        width: 100%;
        box-sizing: border-box;
    }
}