html,body{ height:100%; position:relative; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif}

.card {padding:50px;}
.card .rounded { position:relative; background: green; padding:50px; -webkit-border-radius: 25px;-moz-border-radius: 25px; border-radius: 25px;}
.card .rounded .name { background:yellow; display:inline-block; font-size:3em; text-transform: uppercase; color:#fff; position: absolute; top:0.5em; width:36%; margin-left: -18%; left:50%; text-align: center; padding:0 20px;}
.card .rounded .border { border:8px solid yellow;  -webkit-border-radius: 25px;-moz-border-radius: 25px; border-radius: 25px; padding:50px;}
.card .rounded .corner { position:absolute; width:30px; height:30px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.card .rounded .corner.top.left { top:20px; left:20px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.card .rounded .corner.top.right { top:20px; right:20px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.card .rounded .corner.bottom.left { bottom:20px; left:20px; -ms-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}
.card .rounded .corner.bottom.right { bottom:20px; right:20px; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.card .rounded .name:after {
    content: '';
    display: block;
    width:100%;
    height:150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.content { padding-top:120px; font-size:1.2em; overflow:hidden;}
.content h1 { color:#fff; font-weight: bold;}
.content h2 { display: inline-block; position: relative; background: red; color:black; font-size:1.5em; line-height:1.5em; font-weight: bold; padding:5px 20px; margin-bottom:15px; text-transform:uppercase; width: auto;}
.content h2:before { 
    content: '';
    display: block;
    width:20px;
    height:20px;
    background-color: yellow;
    position:absolute;
    left:-10px;
    top:50%;
    margin-top:-10px;
    -webkit-border-radius: 25px;-moz-border-radius: 25px; border-radius: 25px;
}

.content h2:after { 
    content: '';
    display: block;
    width:20px;
    height:20px;
    background-color: yellow;
    position:absolute;
    right:-10px;
    top:50%;
    margin-top:-10px;
    -webkit-border-radius: 25px;-moz-border-radius: 25px; border-radius: 25px;
}

.content p, .content ul { padding:10px; background: white; margin:0; }
.content img { max-width: 80%;}
.file { text-align: center; padding:10px; background-color: #fff;}

/* defi */
.card.defi .rounded {background: #3D659B;}
.card.defi .rounded .name { background-color: #3D659B;}
.card.defi .rounded .border {border-color:#1F2C49; }
.card.defi .content h2 { background-color: #1F2C49; color:#fff; }
.card.defi .content h2:before {background: #3D659B;}
.card.defi .content h2:after {background: #3D659B;}
.card.defi .rounded .name:after { background-image: url('images/header-defi.png');}
.card.defi .rounded .corner { background-image: url('images/triangle.png');}

/* duel */
.card.duel .rounded {background: #C4414E;}
.card.duel .rounded .name { background-color: #C4414E;}
.card.duel .rounded .border {border-color:#6D202E; }
.card.duel .content h2 { background-color: #6D202E; color:#fff; }
.card.duel .content h2:before {background: #C4414E;}
.card.duel .content h2:after {background: #C4414E;}
.card.duel .rounded .name:after { background-image: url('images/header-duel.png');}
.card.duel .rounded .corner { background-image: url('images/rond.png');}

/* Responsive stuff */
@media only screen and (max-width: 768px) {
    .card { padding:5px;}
    .card .rounded { padding:10px;}
    .card .rounded .name { font-size:1.6em; top:0em; width:60%; margin-left: -30%;}
    .card .rounded .corner { display:none;}
    .card .rounded .border { padding:10px; border-width:4px;}
    .content { padding-top: 140px;}
    .content h2 {font-size: 0.9em;}
}