@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap');

      body { background-color: #EEE; 
font-family: 'Varela Round', sans-serif;   overflow-y:scroll;
        margin: 0px; display:block;
}

.bigprice {
  font-family: 'Knewave';
    font-size: 58px;
  color: #999;
   display:inline-block;
  float: right;
  vertical-align:top;
}

.wrapper {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: repeat(4, 110px);
  height: 510px;
  width: 610px;
  gap: 10px;
  grid-template-areas:
    "a a a a"
    "b b c e"
    "b b f g"
	"d d d d";
  justify-content: center;
  align-content: center;
}
.wrapper2 {
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 160px);
  grid-template-rows: auto;
  width: 610px;
  gap: 10px;
  grid-template-areas:
    "a a a a"
    "b b g g"
    "b b g g"
	"d d d d";
  justify-content: center;
  align-content: center;

}
.schoolchoice {
  grid-area: a; 
  border-radius: 10px;
  background: #DDD;
  padding: 10px;


}
.leftclothes {
  grid-area: b; 
  border-radius: 10px;
  background: #DDD;
  padding: 10px;

}
.rightclothesc {
  grid-area: c; 
  border-radius: 10px;
  background: #F0D6D6;
  padding: 5px;

}.rightclothese {
  grid-area: e; 
  border-radius: 10px;
  background: #E1E6EC;
  padding: 5px;

}.rightclothesf {
  grid-area: f; 
  border-radius: 10px;
  background: #DADAE3;
  padding: 5px;

}.rightclothesg {
  grid-area: g; 
  border-radius: 10px;
  background: #DDD;
  padding: 5px;

}.submitbuttonwrap {
  grid-area: d; 
  border-radius: 10px;
  height: 40px;
  background: #DDD;
  padding: 10px;}
    
.submitbutton {
  grid-area: d; 
  border-radius: 10px;
  height: 40px;
  background: #DDD;
  padding: 10px;
  
}  .submitbutton:hover {
  grid-area: d; 
  border-radius: 10px;
  height: 40px;
  background: #0AE;
  padding: 10px; }
      
#fname { 
	height: 45px;
    font-family: 'Varela Round', sans-serif;
  	font-size: 18px;
	border: 1px solid #dee0e4;
    border-radius: 10px;
	margin-bottom: 20px;
      padding: 0 15px; } 
      
#title { font-family: 'Varela Round', sans-serif; }
#title2 { font-family: 'Varela Round', sans-serif; font-size:24px;}
 .clear{
	width:100%;
	float:none;
	clear:both;
}

.purchase-info{
    margin: 1.5rem 0;
}
.purchase-info input,
.purchase-info select,
.purchase-info .btn{
    border: 1.5px solid #ddd;
    border-radius: 25px;
    text-align: center;
    padding: 0.45rem 0.8rem;
    outline: 0;
    margin-right: 0.2rem;
    margin-bottom: 1rem;
}
.purchase-info .btnx{
    border: 1.5px solid #ddd;
    border-radius: 25px;
    text-align: center;
    padding: 0.45rem 0.8rem;
    outline: 0;
    width: 90px;
    background: #ddd;
}
.purchase-info input{
    width: 70px;
}
.purchase-info select{
    width: 160px;
}
.purchase-info .btn{
    cursor: pointer;
    color: #fff;
}
.purchase-info .btn:first-of-type{
    background: #256eff;
}
.purchase-info .btn:last-of-type{
    background: #f64749;
}
.purchase-info .btn:hover{
    opacity: 0.8;
}
.purchase-info .btnx:hover{
    opacity: 0.8;
}

.footer {
  text-align: center;
  margin-top: 5px;
  color:black; 
  font-size:10px;
}
     .bg {
      	background-image: url('https://skoleol.jk-tryk.dk/triangles.png'); 
      	background-repeat: repeat;
        background-color: coral;
        height: 135px;
        width: auto;
        overflow: hidden;
      }