:root {
    --moveimage: margin-right: 10px ;
    --numsmall:25%;
    --nummed:50%;
    --numlarge:75%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
}
    
body {
    background-color: rgb(53, 52, 52);
}

.col1of3 {
    background-color: rgb(15, 180, 235);
    padding: 5px;
    margin: 20px;
    border-radius: 2px;
    width: 100%;
    height: 90vh;
}
    
.col1of3 h3 {
    text-align: center;
}

.extra-center {
    text-align: center;
}
    
#rectangle {
    width:110px;
    height: 250px;
    background: white;
    margin-left: 45%;
}

img { 
    position: relative;
    width: 150px;
    height: 100px;
}
    
#rectangle.twenfive {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) var(--numlarge), rgba(255, 0, 0, 1) var(--numsmall) 100%);
}
  
#rectangle.fifty {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) var(--nummed), rgba(255, 0, 0, 1) var(--nummed) 100%);
}
  
#rectangle.sevenfive {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) var(--numsmall), rgba(255, 0, 0, 1) var(--numlarge) 100%);
}
  
#rectangle.onehun {
    background: linear-gradient(180deg, rgba(255, 0, 0, 1) var(--numsmall), rgba(255, 0, 0, 1) var(--numlarge) 100%);
}
    
@media (min-width:768px) {
    .flex-container {
        display:flex;
    }
    .col1of3 {
        flex: 1;
    }
}